import { post } from "@/api/http";
import { login } from "@/api/url";
import {
  jumpLoginPageAction,
  saveInfoAction,
  UserInfoContext,
} from "@/store/user";
import { UserInfoType } from "@/types";
import { Button, Form, Input, Checkbox } from "antd";
import { useContext, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import style from "./index.module.less";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import workImg from "@/assets/work.png";

const onFinish = (values: any) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

const LeftBox: React.FC = () => {
  return (
    <>
      <div className={style["info-wrapper"]}>
        <div className={style["info-bg"]}></div>
        <div className={style["info-box"]}>
          <div style={{ textAlign: "center" }}>
            <img src={workImg} className={style["info-img"]} />
            <div className={"white-color"} style={{ fontSize: "32px" }}>
              Admin Work
            </div>
            <div className={style["info-title"]}>
              React + Vite3 + Typescript + Ant-design
            </div>
          </div>
          <div className={style["info-text"]}>生活，应该还有诗和远方</div>
        </div>
      </div>
    </>
  );
};
const Login: React.FC = () => {
  const navigate = useNavigate();
  const { dispatch } = useContext(UserInfoContext);
  useEffect(() => {
    dispatch(jumpLoginPageAction());
  }, []);
  async function onLogin() {
    const result = await post<UserInfoType>({
      url: login,
      data: {
        username: "admin",
        password: "12346",
      },
    });
    if (result.code === 200) {
      const data = result.data;
      dispatch(
        saveInfoAction({
          userName: data.userName,
          nickName: data.nickName,
          roleId: data.roleId,
          userId: data.userId,
          token: data.token,
          isLogined: true,
        })
      );
      navigate("/dashborad/home", { replace: true });
    }
  }
  return (
    <>
      <div className={style["home-wrapper"]}>
        <LeftBox />
        <div className={style["login-wrapper"]}>
          <Form
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            className={style["form-wrapper"]}
          >
            <h3>账号登录</h3>
            <Form.Item rules={[{ required: true, message: "账号必填项" }]}>
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                style={{ width: "100%" }}
                placeholder="请输入账号：admin"
              />
            </Form.Item>
            <Form.Item rules={[{ required: true, message: "密码必填项" }]}>
              <Input.Password
                prefix={<LockOutlined className="site-form-item-icon" />}
                style={{ width: "100%" }}
                placeholder="请输入密码：123456"
              />
            </Form.Item>
            <Form.Item name="remember" valuePropName="checked">
              <div className={style["bottom-box"]}>
                <Checkbox>自动登录</Checkbox>
                <span>忘记密码？</span>
              </div>
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                onClick={onLogin}
                className={style["login-form-button"]}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </>
  );
};

export default Login;
